<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- 
    props
      可以用于父子组件通信
    
    1 在子组件中设置props属性
    2 在子组件组件标签中使用prop
    3 在父组件的组件模板中找到子组件标签，在标签上设置属性prop名字="值"

    那么这个值就会传递给子组件

    上面三个步骤只要全部完成即可，不需要按顺序写

    组件标签上添加属性其实就是prop传递数据
  -->
  <div id="app">
    <tree></tree>

  </div>
  <script src="./vue.js"></script>
  <script>
    const tree = {
      template: `
        <div>
          苹果树
          <lanzi></lanzi>
          <lanzi fruit="红苹果"></lanzi>
          <lanzi fruit="苹果"></lanzi>
          <lanzi :fruit="a"></lanzi>
          <lanzi></lanzi>
          <lanzi></lanzi>
          <lanzi></lanzi>

        </div>
      `,
      data () {
        return {
          a: '青苹果'
        }
      }
    }

    const lanzi = {
      template: `
        <div>{{fruit ? fruit : '空的'}}</div>
      `,
      props: ['fruit']
    }
    
    Vue.component('Tree', tree)
    Vue.component('lanzi', lanzi)


    const app = new Vue({
      el: '#app'

    })
  </script>
</body>
</html>